<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>订单详情</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/amazeui.min
.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/app.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/index.css">
    <!--必要样式-->
    <style type="text/css">
        body {
            background-color: #EFEFEF;
        }

        .am-header-default {
            background-color: #ED6D00;
        }

        .statu {
            margin: 10px 0 5px;
            padding: 15px 0px;
            background-color: #FFFFFF;
            position: relative
        }

        .statu .box {
            z-index: 10;
        }

        .statu .box span {
            color: #3D3D3D;
            font-size: 15px;
        }

        .statu .box .time {
            font-size: 9px;
            color: #515151
        }

        .box-bottom {
            border-top: 1px dashed #FDDE92;
            position: absolute;
            top: 43%;
            left: 17%;
            text-align: center
        }

        .box-bottom span {
            font-size: 9px;
            color: #A2A2A2;
        }

        .confirm-btn {
            display: inline-block;
            border: 1px solid #FFBD53;
            color: #FFBD53;
            font-size: 12px;
            padding: 2px 0;
            border-radius: 5px;
            margin-right: 20px;
            width: 60px;
            text-align: center;
        }

        .confirm-btn-change {
            color: #989898;
            border-color: #989898;
        }

        .storename {
            line-height: 55px;
            border-bottom: 1px solid #e6e6e6
        }

        .storename span {
            vertical-align: middle;
            display: inline-block;
            margin-left: 10px;
            font-size: 18px;
        }

        .good {
            padding: 0 0 20px 20px;
            line-height: 50px;
            color: #333;
            font-size: 16px;
        }

        .good-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

        .good-num span {
            font-size: 18px
        }

        .good-price span {
            font-size: 16px;
            color: #E91B1B;
        }

        .send {
            border-top: 1px solid #D8D8D8;
            border-bottom: 1px solid #EEEEEE;
        }

        .order-bottom {
            margin-top: 5px;
            line-height: 50px;
            color: #666;
            padding-left: 15px;
        }

        .order-bottom .f {
            border-bottom: 1px solid #F8F8F8
        }

        .right10 {
            display: inline-block;
            margin-right: 10px;
        }
    </style>
</head>

<body>
<header data-am-widget="header" class="am-header am-header-default am-header-fixed">
    <div class="am-header-left am-header-nav">
        <a href="${pageContext.request.contextPath}/clientHome/goGoodsOrderList" class="">
            <i class="am-header-icon am-icon-chevron-left"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        <a href="#title-link" class="">
            订单详情
        </a>
    </h1>
</header>

<div class="am-g statu" align="center">

    <c:if test="${order.statu==1}">
        <div class="am-u-sm-12" align="center">
            <span>未付款</span><br>
                <%--<span style="display: block;font-size: 14px;">等待付款</span>--%>
        </div>
    </c:if>
    <c:if test="${order.statu==2}">
        <div class="am-u-sm-12" align="center">
            <span>已提交</span><br>
            <span style="display: block;font-size: 14px;">等待接单</span>
            <a onclick="cancel()" href="#"><span class="confirm-btn">取消订单</span></a>
        </div>
    </c:if>
    <c:if test="${order.statu==3}">
        <div class="am-u-sm-12">
            <span>商家拒绝接单</span><br>
            <span style="display: block;font-size: 14px;">订单已取消</span>
        </div>
    </c:if>
    <c:if test="${order.statu==4}">
        <div class="am-u-sm-12">
            <span>取消订单中</span><br>
            <span style="display: block;font-size: 14px;">等待商家的确认取消</span>
        </div>
    </c:if>
    <c:if test="${order.statu==5}">
        <div class="am-u-sm-12">
            <span>取消已订单</span><br>
            <span style="display: block;font-size: 14px;">商家已确认取消您的订单</span>
        </div>
    </c:if>
    <c:if test="${order.statu==6}">
        <div class="am-u-sm-12">
            <span>商家已接单</span><br>
            <span style="display: block;font-size: 14px;">等待配送</span>
            <a onclick="reminder()" href="#"><span class="confirm-btn">催单</span></a>
        </div>
    </c:if>
    <c:if test="${order.statu==7}">
        <div class="am-u-sm-12">
            <span>已催单</span><br>
            <span style="display: block;font-size: 14px;">等待商家确认催单</span>
        </div>
    </c:if>
    <c:if test="${order.statu==8}">
        <div class="am-u-sm-12">
            <span>商家已确认催单</span><br>
            <span style="display: block;font-size: 14px;">等待商家的配送</span>
        </div>
    </c:if>
    <c:if test="${order.statu==9}">
        <div class="am-u-sm-12">
            <span>商家已派送</span><br>
            <span style="display: block;font-size: 14px;">等待收货</span>
            <a onclick="complete()" href="#"><span class="confirm-btn">确认收货</span></a>
        </div>
    </c:if>
    <c:if test="${order.statu==10}">
        <div class="am-u-sm-12">
            <span>订单已完成</span><br>
            <span style="display: block;font-size: 14px;">等待评价</span>
            <a href="${pageContext.request.contextPath}/clientHome/goToShopComment?id=${order.id}"><span
                    class="confirm-btn">去评价</span></a>
        </div>
    </c:if>
    <c:if test="${order.statu==11}">
        <div class="am-u-sm-12">
            <span>订单已完成</span><br>
            <span style="display: block;font-size: 14px;">欢迎再次使用！</span>
        </div>
    </c:if>


</div>

<div class="am-g whiteBg">
    <div class="am-u-sm-12 storename">
        <img src="${pageContext.request.contextPath}/images/store.png" alt=""><span>${shop.shopName}</span>
    </div>
</div>
<div class="am-g good whiteBg">

    <c:if test="${order.type==0}">
        <c:forEach items="${goodsList}" var="goods">
            <div class="am-u-sm-4 good-name">
                <span>${goods.goodsName}</span>
            </div>
            <div class="am-u-sm-8">
                <span style="float: right;margin-right: 10px;">${goods.propertyName}</span>
                <span style="float: right;margin-right: 10px;">x${goods.quantity}</span>
                <span style="float: right;color:red;">￥${goods.propertyValue}</span>
            </div>
            <%--<div class="am-u-sm-2 good-num"><span>x${goods.quantity}</span></div>--%>
            <%--<div class="am-u-sm-3 am-padding-0 good-price"><span>￥${goods.propertyValue}</span></div>--%>
        </c:forEach>

        <div class="am-u-sm-9 send">
            <span>金额</span>
        </div>
        <div class="am-u-sm-3 am-padding-0 send good-price"><span>￥${order.totalPrice}</span></div>
    </c:if>
    <c:if test="${order.type==1}">
        <div class="am-u-sm-4 good-name">
            <span>${integralGoods.goodsName}</span>
        </div>

        <div class="am-u-sm-4 "><span style="font-size: 12px;">已付积分：${order.integral}</span></div>
        <div class="am-u-sm-4 am-padding-0 good-price"><span>已付金额：${order.totalPrice}</span></div>
        <div class="am-u-sm-9 send">
            <span>总积分</span>
        </div>
        <div class="am-u-sm-3 am-padding-0 send good-price"><span>
        <fmt:formatNumber type="number" value="${order.integral+order.totalPrice}"
                          pattern="0.00" maxFractionDigits="2"/>
        </span></div>
    </c:if>
</div>

<div class="am-g whiteBg order-bottom">
    <div class="am-u-sm-12 f">
        <span class="right10">订单编号：</span><span>${order.id}</span>
    </div>
    <c:if test="${order.receiveAddress!=null}">
        <div class="am-u-sm-12 f">
            <span class="right10">收货人：</span><span>${name}</span>
        </div>
        <div class="am-u-sm-12 f">
            <span class="right10">联系方式：</span><span>${phone}</span>
        </div>
        <div class="am-u-sm-12 f">
            <span class="right10">收货地址：</span><span>${address}</span>
        </div>
    </c:if>
    <div class="am-u-sm-12">
        <span class="right10">订单时间：</span><span class="right10">${createTime}</span>
    </div>
    <div class="am-u-sm-12">
        <span class="right10">备注：</span><span class="right10">${order.note}</span>
    </div>
</div>

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/amazeui.min.js"></script>
<script src="${pageContext.request.contextPath}/layer/layer.js"></script>
<script type="text/javascript">
    function changeStatu() {
        $("#reminder").addClass('confirm-btn-change').text('已催单');

    }

    function cancel() {
        post("${pageContext.request.contextPath}/userGoodsOrder/cancel");
    }

    function reminder() {
        post("${pageContext.request.contextPath}/userGoodsOrder/reminder");
    }

    function complete() {
        post("${pageContext.request.contextPath}/userGoodsOrder/complete");
    }

    function post(uri) {
        $.ajax({
            type: "post",
            url: uri,
            data: {'id':${order.id}},
            dataType: 'json',
            success: function (data) {

                if (data.success == true && data.code == 200) {
                    document.location.reload();
                } else {
                    layer.msg(data.msg);
                }
            },
            error: function () {
                layer.msg('网络超时');
            }

        });
    }

</script>
</body>

</html>
